<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LoveJob_资源列表</title>
    <link rel="stylesheet" href="media/layui/css/layui.css">
    <script type="application/javascript" src="media/js/jquery.min.js"></script>
    <script type="application/javascript" src="media/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>权限列表</legend>
    </fieldset>
    <table id="userdata" lay-filter="tableop"></table>
    <script type="text/html" id="tarop">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
</div>

<script type="application/javascript">
    layui.use('table', function() {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#userdata'
            , height: 'full-40'
            , url: 'permissionpage.do' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                , {field: 'name', title: '名称'}
                , {field: 'type', title: '类型',templet: function(d){
                        if(d.type==1){
                            if(d.parentid==-1){
                                return "一级菜单";
                            }else{
                                return "二级菜单";
                            }
                        }else {
                            return "按钮";
                        }
                    }
                }
                , {field: 'per', title: '权限/路径' }
                , {field: 'parentid', title: '上级菜单' }
                , {field: 'icon', title: '图标', templet: function(d) {
                            if(d.icon!=null && d.icon.length>0){
                                return "<i class='layui-icon "+d.icon+"'></i>";
                            }else {
                                return "";
                            }
                        }
                    }
            ]]
        });
        //监听工具条
        table.on('tool(tableop)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });
</script>
</body>
</html>